{% extends 'layouts/base.html' %}
{% load static i18n %}

{% block title %}{% trans "Perguntas Frequentes" %}{% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/faq.css' %}"> 
{% endblock extrastyle %}

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="#"> {% trans "Ajuda" %}</a></li>
<li class="breadcrumb-item active" aria-current="page">{% trans "Perguntas Frequentes" %}</li>
{% endblock breadcrumbs %}

{% block page_header %}
<h5 class="display-5">{% trans "Perguntas Frequentes" %}</h5>
{% endblock page_header %}

{% block content %}
<div class="row">
  <div class="col-sm-8 offset-sm-2">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h4 class="text-white"><i class="feather icon-help-circle"></i> {% trans "Perguntas Frequentes" %}</h4>
            <p class="mb-0">{% trans "Encontre as respostas para as perguntas mais comuns feitas pelos nossos usuários." %}</p>
          </div>
        </div>
      </div>
      <div class="card-body">
        {% if private_faqs %}
        <div class="accordion" id="faqAccordionPrivate">
          {% for faq in private_faqs %}
            <div class="card faq-item">
              <div class="card-header" id="headingPrivate{{ forloop.counter }}">
                <h2 class="mb-0">
                  <button class="btn btn-link btn-block text-left {% if not forloop.first %}collapsed{% endif %}" 
                          type="button" 
                          data-bs-toggle="collapse" 
                          data-bs-target="#collapsePrivate{{ forloop.counter }}" 
                          aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" 
                          aria-controls="collapsePrivate{{ forloop.counter }}">
                    {{ faq.question }}
                  </button>
                </h2>
              </div>
              <div id="collapsePrivate{{ forloop.counter }}" 
                   class="collapse {% if forloop.first %}show{% endif %}" 
                   aria-labelledby="headingPrivate{{ forloop.counter }}" 
                   data-bs-parent="#faqAccordionPrivate">
                <div class="card-body">
                  {{ faq.answer|safe }}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
        {% else %}
          <p class="text-center">{% trans "Não há perguntas frequentes disponíveis no momento." %}</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock extra_js %}
